<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="product_header_name" style="margin-top: 0px">
            <div class="deleted_Line" />
            <span style="margin: 10px 5px;">{{orderDate}}账单</span>
            <span style="margin: 10px 5px;font-weight: normal" v-if="distributionDate">({{distributionDate}}结算)</span>
          </div>
          <div style="display: flex">

          </div>
        </div>
        <div class="deleted_OrderHeader">
          <div style="border-left: none;height: 100px;display: flex;flex-direction:column;align-items: center;justify-content: center;padding-top: 30px;">
            <div>
              <span class="money_text">{{form.distributionAmount}}</span>
              <span style="font-size: 25px;color: #E6A23C;line-height: 48px">¥</span>
            </div>
            <div>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)" v-if="status==0">（未结算）</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)" v-if="status==1">（已结算）</span>
            </div>
          </div>
          <span class="deleted_Row_Headings">有效订单数量：</span>
          <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{ form.rc }}单</span>

        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">商品费用：</span>
              <span style="color: red" v-if="form.subPrice>0">+</span>
              <span class="deleted_OrderTitle">{{ form.subPrice }}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">包装费用：</span>
              <span style="color: red" v-if="form.packagingFee>0">+</span>
              <span class="deleted_OrderTitle">{{ form.packagingFee}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">配送费用：</span>
              <span style="color: red" v-if="form.freight>0">+</span>
              <span class="deleted_OrderTitle">{{ form.freight}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">服务费用：</span>
              <span style="color: red" v-if="form.fee>0">-</span>
              <span class="deleted_OrderTitle">{{ form.fee}}</span>
            </el-col>

            <el-col :span="8">
              <span class="deleted_Row_Headings">商家补贴：</span>
              <span class="deleted_OrderTitle">{{ form.discount}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">平台补贴：</span>
              <span class="deleted_OrderTitle">{{ form.couponDiscount}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name">
          <div class="deleted_Line" />
          <span style="margin: 10px 5px;">订单记录</span>
        </div>
        <el-table
          :data="orderList"
          border
          :height="curHeight"
          stripe
          style="width: 100%;margin-top: 10px;"
        >
          <el-table-column
            label="订单序号"
            width="100"
            prop="id"
            align="center"
          />
          <el-table-column
            label="订单号"
            prop="sn"
            align="center"
          />
          <el-table-column
            label="商品费用"
            prop="subPrice"
            align="center"
          />
          <el-table-column
            label="包装费用"
            prop="packagingFee"
            align="center"
          />
          <el-table-column
            label="配送费用"
            prop="freight"
            align="center"
          />
          <el-table-column
            label="服务费用"
            prop="fee"
            align="center"
          />
          <el-table-column
            label="商家补贴"
            prop="discount"
            align="center"
          />
          <el-table-column
            label="平台补贴"
            prop="couponDiscount"
            align="center"
          />
          <el-table-column
            label="全部类型"
          >
            <template slot-scope="{row}">
             <span>{{row.orderType==1?"销售单":"退款单"}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="结算金额 (元)"
            prop="distributionAmount"
          ></el-table-column>
          <el-table-column
            label="订单详情"
            width="100"
          >
            <template slot-scope="{row}">
              <a class="details_Title" @click="toDeatil(row.id,row.orderType)">查看详情</a>
            </template>
          </el-table-column>
        </el-table>
        <el-footer class="el-footerBox" style="margin-bottom: auto">
          <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrderList"></pagination>
        </el-footer>
      </div>
    </el-card>


  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import {distributionVoDetailView,distributionVoOrderList} from '@/api/distributionVo'
  import permission from "@/directive/permission/index.js"; // 权限判断指令
  import { EventBus } from "@/api/eventBus";
  import utils from "../../utils/utils.js";
  import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
  import { mapGetters } from "vuex";
  import printJs from "print-js";

  export default {
    naem: "order-view",
    directives: { elDragDialog, permission },
    data() {
      return {
        form:{},
        orderList:[],
        pageSize:20,
        status:'',
        pageNum:1,
        curHeight: null,
        total:0,
        orderDate:'',
        enterpriseId:'',
        distributionDate:''
      };
    },
    watch: {
      // 只要路由发生变化就重新获取数据
      $route(newVal, oldVal) {
        console.log(newVal);
        if (newVal.name == "order-view" && newVal.query.id != this.form.id) {
          this.enterpriseId = newVal.query.id;
          this.loadOrder()
        }
      },
    },

    computed: {
      ...mapGetters(["token"]),
    },
    filters: {
      watchStatus(val) {
        if (val == 0) {
          return "待付款";
        } else if (val == 1) {
          return "已付款";
        } else if (val == 2) {
          return "待退款";
        } else if (val == 3) {
          return "已退款";
        }
      },
      watchOrderMatch(val) {
        if (val == 0) {
          return "线上订单";
        } else if (val == 1) {
          return "人工报单";
        } else if (val == 2) {
          return "门店自提";
        }
      },
      watchShippingMethod(val) {
        if (val == 0) {
          return "普通快递";
        } else if (val == 1) {
          return "到店提货";
        } else if (val == 2) {
          return "同城配送";
        }
      },

      watchTaxType(val) {
        if (val == 0) {
          return "不开票";
        } else if (val == 1) {
          return "增票";
        } else if (val == 2) {
          return "普票";
        }
      },
      watchPayment(val) {
        if (val == 0) {
          return "等待支付";
        } else if (val == 1) {
          return "支付成功";
        } else if (val == 2) {
          return "超时关闭";
        } else if (val == 3) {
          return "付款失败";
        }
      },
      watchNum(val) {
        if (val == undefined) {
          return 0;
        } else {
          return val;
        }
      },
      planStatus(val) {
        if (val == "0") {
          return "待配送";
        } else if (val == "1") {
          return "配送中";
        } else if (val == "2") {
          return "配送完成";
        }
      },
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    created() {
      var _this = this;
      this.status=this.$route.query.status
      _this.enterpriseId= this.$route.query.id;
      _this.orderDate=this.$route.query.date
      _this.distributionDate=this.$route.query.distributionDate
     this.loadOrder()
      this.loadOrderList()
    },
    components: { Pagination  },
    methods: {
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.curHeight = h - 450  //减去页面上固定高度height this.curHeight = h - 220 //减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        var _this = this
        setTimeout(function() {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 450 //减去页面上固定高度height this.curHeight = h - 220 //减去页面上固定高度height
          console.log(_this.curHeight)
        }, 1);
      },
      toDeatil(data,type){
        if (type==1){
          this.$router.push({
            path: '/order/view', query: { id: data }
          })
        }else{
          this.$router.push({
            path:'/askfor/view',query:{id:data}
          })
        }

      },
      loadOrderList(){
        distributionVoOrderList({
          pageSize:this.pageSize,
          pageNum:this.pageNum,
          status:this.status,
          orderDate:this.orderDate,
          enterpriseId:this.enterpriseId,
          distributionDate:this.distributionDate
        }).then(res=>{
            this.total=res.data.total
            this.orderList=res.data.data
        })
      },
      loadOrder(){
        distributionVoDetailView({
          orderDate:this.orderDate,
          status:this.status,
          enterpriseId:this.enterpriseId,
          distributionDate:this.distributionDate
        }).then(res=>{
          this.form=res.data
        })
      },
    },
  };
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409eff;
  }

  .details_Title {
    font-size: 14px;
    color: #409EFF;
  }

  .submit_payMethod_Content_Date {
    font-size: 12px;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
    line-height: 36px;
    /* display: block; */
    /* margin-top: 10rpx; */
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 5px;
    padding-bottom: 10px;
    margin: 10px 0;
    /*border-left: 1px solid #f2f2f2;*/
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {}

  .money_text {
    font-size: 35px;
    color: #E6A23C;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409eff;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }

  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .product_header_Plans {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .product_header_Plans_left {
    display: flex;
    align-items: center;
  }
</style>
